<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			小区管理
		</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/main.css" media="all">
		<script type="text/javascript" src="lib/loading/okLoading.js"></script>
		<!--百度编辑器-->
		<script src="ueditor/ueditor.config.js"></script>
		<script src="ueditor/ueditor.all.min.js"></script>
		<script src="ueditor/lang/zh-cn/zh-cn.js"></script>
		<script src="js/axios.js"></script>
	</head>
	<style>
		.imgs {
			display: none;
		}

		.picture {
			display: none;
		}
	</style>
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a><cite>首页</cite></a>
				<a><cite>小区管理</cite></a>
				<a><cite>修改小区</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
				href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
					style="line-height:30px">ဂ</i></a>
		</div>
		<div class="x-body">
			<form class="layui-form layui-form-pane" action="" id="add">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<!--<ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>SEO信息</li>
                <li>栏目内容</li>
            </ul>-->

					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<!--<form class="layui-form layui-form-pane" action="" id="add">-->
							<input type="hidden" id="id" name="id" value="">
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>小区管理员
								</label>
								<div class="layui-input-block">
									<select name="user_id" id="user_id">


										<!-- <option value="2" >admin007</option> -->

									</select>
									<script>
										let xiaoquString = localStorage.getItem("xiaoqu_edit");
										let xiaoqu = JSON.parse(xiaoquString);

										let url = "http://localhost:8080/wuye_war_exploded/UserController/selectUserAll";
										axios.get(url).then((r) => {
											let arr = r.data.data;
											let innerHTML = "";
											for (let i = 0; i < arr.length; i++) {
												if (xiaoqu.userId == arr[i].id) {
													innerHTML = innerHTML + " <option value=\"" + arr[i].id + "\" selected>" + arr[i]
														.username +
														"</option>";
												} else {
													innerHTML = innerHTML + " <option value=\"" + arr[i].id + "\" >" + arr[i].username +
														"</option>";
												}

											}
											document.getElementById("user_id").innerHTML = innerHTML;
										});
									</script>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>小区名称
								</label>
								<div class="layui-input-block">
									<input id="xiaoqumingcheng" type="text" name="community_name" autocomplete="off"
										placeholder="小区名称" class="layui-input" required="" lay-verify="required"
										value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>坐落地址
								</label>
								<div class="layui-input-block">
									<input id="address" type="text" name="cell_address" autocomplete="off"
										placeholder="坐落地址" class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>占地面积
								</label>
								<div class="layui-input-block">
									<input id="area" type="text" name="area_covered" autocomplete="off"
										placeholder="占地面积" class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>开发商名称
								</label>
								<div class="layui-input-block">
									<input id="kaifashangmingcheng" type="text" name="developers" autocomplete="off"
										placeholder="开发商名称" class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>物业公司名称
								</label>
								<div class="layui-input-block">
									<input id="wuyegongsimingcheng" type="text" name="property" autocomplete="off"
										placeholder="物业公司名称" class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>绿化率
								</label>
								<div class="layui-input-block">
									<input id="lvhualv" type="text" name="afforestation_rate" autocomplete="off"
										placeholder="绿化率" class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>总栋数
								</label>
								<div class="layui-input-block">
									<input id="dongshu" type="text" name="tung" autocomplete="off" placeholder="总栋数"
										class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>总户数
								</label>
								<div class="layui-input-block">
									<input id="zonghushu" type="text" name="household" autocomplete="off"
										placeholder="总户数" class="layui-input" lay-verify="required" value="">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class='x-red'>*</span>状态
								</label>
								<div class="layui-input-block">
									<input type="radio" name="status" value="1" title="启用">
									<div class="layui-unselect layui-form-radio layui-form-radioed"><i
											class="layui-anim layui-icon layui-anim-scaleSpring"></i>
										<div>启用</div>
									</div>
									<input type="radio" name="status" value="0" title="停用" checked="checked">
									<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
										<div>停用</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label for="link" class="layui-form-label">
									<span class="x-red">*</span>小区缩略图
								</label>
								<div class="layui-input-inline">
									<div class="site-demo-upbar">
										<div class=" layui-upload-button" style="border:#FFFFFF ;">
											<button type="button" class="layui-btn" id="test1">
												<i class="layui-icon">&#xe67c;</i>上传图片
											</button>
											<input class="layui-upload" type="file" accept="undefined" id="previewImg"
												name="images" onchange="upload(this,)">
										</div>

									</div>
								</div>

								<!--<a href="javascript:;" style="" class="layui-btn " id="cancel"><i class="layui-icon">ဂ</i>撤销上传</a>-->
							</div>
							<!--  <div class="layui-form-item imgs" id="imgshow">
                        <label  class="layui-form-label">小区缩略图展示
                        </label>
                        
                        <input id="avatar"   name="image" required="" type="hidden"  value="">
                    </div> -->
							<div class="layui-form-item">
								<label for="link" class="layui-form-label">
									<span class="x-red">*</span>缩略图展示
								</label>
								<div>
									<img src="images/tx.jpg" id="showImage" name="pimages"
										style="width: 400px;height: 200px;" />

									<script>
										document.getElementById("showImage").src =
											"http://localhost:8080/wuye_war_exploded/XiaoQuController/showImage?fileName=" +
											xiaoqu.icon;
									</script>
								</div>
							</div>
							<div class="layui-form-item">
								<label for="link" class="layui-form-label">
									<span class="x-red">*</span>小区简介
								</label>
								<div class="layui-input-inline">
									<textarea id="description" placeholder="" name="desc"></textarea>
								</div>
							</div>

							<div class="layui-form-item">
								<button class="layui-btn" type="button" lay-filter="add" lay-submit="">
									保存
								</button>
							</div>
							<!--</form>-->
							<div style="height:100px;"></div>
						</div>



					</div>

				</div>
			</form>
		</div>
		<script src="lib/layui/layui.js" charset="utf-8"></script>
		<script src="js/x-layui.js" charset="utf-8"></script>
		<script type="text/javascript">
			//实例化编辑器
			//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
			UE.getEditor('content', {
				initialFrameWidth: 700,
				initialFrameHeight: 200,
			});
		</script>
		<script>
			document.getElementById("id").value = xiaoqu.id;
			document.getElementById("xiaoqumingcheng").value = xiaoqu.xiaoqumingcheng;
			document.getElementById("address").value = xiaoqu.address;
			document.getElementById("area").value = xiaoqu.area;
			document.getElementById("dongshu").value = xiaoqu.dongshu;
			document.getElementById("zonghushu").value = xiaoqu.zonghushu;
			document.getElementById("lvhualv").value = xiaoqu.lvhualv;
			fileName = xiaoqu.icon;
			document.getElementById("kaifashangmingcheng").value = xiaoqu.kaifashangmingcheng;
			document.getElementById("wuyegongsimingcheng").value = xiaoqu.wuyegongsimingcheng;
			//let chuangjianshijian=document.getElementById("chuangjianshijian").value;
			document.getElementById("description").value = xiaoqu.description;
			let states = document.getElementsByName("status");
			if (xiaoqu.state == 0) {
				states[0].checked = "checked";
			} else {
				states[1].checked = "checked";
			}



			layui.use(['element', 'layer', 'form'], function() {
				$ = layui.jquery; //jquery
				lement = layui.element(); //面包导航
				layer = layui.layer; //弹出层
				form = layui.form();
				okLoading.close($);

				//监听提交
				form.on('submit(add)', function(data) {
					let id = document.getElementById("id");
					let userId = document.getElementById("user_id").value;
					let xiaoqumingcheng = document.getElementById("xiaoqumingcheng").value;
					let address = document.getElementById("address").value;
					let area = document.getElementById("area").value;
					let dongshu = document.getElementById("dongshu").value;
					let zonghushu = document.getElementById("zonghushu").value;
					let lvhualv = document.getElementById("lvhualv").value;
					let icon = fileName;
					let kaifashangmingcheng = document.getElementById("kaifashangmingcheng").value;
					let wuyegongsimingcheng = document.getElementById("wuyegongsimingcheng").value;
					//let chuangjianshijian=document.getElementById("chuangjianshijian").value;
					let description = document.getElementById("description").value;
					let states = document.getElementsByName("status");
					let state = 0;
					if (states[0].checked) {
						state = 0;
					} else {
						state = 1;
					}
					let url = "http://localhost:8080/wuye_war_exploded/XiaoQuController/edit";
					alert(id);
					axios.post(url, {
						id: xiaoqu.id,
						userId: userId,
						xiaoqumingcheng: xiaoqumingcheng,
						address: address,
						area: area,
						dongshu: dongshu,
						zonghushu: zonghushu,
						lvhualv: lvhualv,
						icon: icon,
						kaifashangmingcheng: kaifashangmingcheng,
						wuyegongsimingcheng: wuyegongsimingcheng,
						description: description,
						status: state
					}).then((r) => {
						if (r.code == 200) {
							//添加成功
							layer.msg("更新成功", {
								icon: 6,
								time: 2000
							}, function() {
								window.parent.location.reload();
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							});
						} else {
							layer.msg("更新失败", {
								icon: 5,
								time: 2000
							});
							return false;
						}
					});
					return false;
				});

			})
		</script>
		<!--栏目缩略图上传-->
		<script>
			let fileName = null;

			function upload(obj, id) {

				//formData.append('images', $('#previewImg')[0].files[0]);
				var formData = new FormData();
				formData.append('images', $('#previewImg')[0].files[0]);
				formData.append('id', id);
				layer.msg('图片上传中', {
					icon: 16
				});
				let file = $('#previewImg')[0].files[0];
				let srcValue = window.URL.createObjectURL(file);
				document.getElementById("pimages").src = srcValue;
				let url = "http://localhost:8080/wuye_war_exploded/UserController/uploadIcon";
				let reader = new FileReader();


				// base64 = base64.replace(/^data:image\/.*;base64,/, '');

				reader.onload = function(e) {
					let base64 = e.target.result;
					// console.log(e.target.result)
					base64 = base64.substring(base64.indexOf(",") + 1);
					// console.log(base64);
					axios.post(url, {
						id: id,
						base64: base64
					}).then((r) => {
						console.log(r.data);
						fileName = r.data.data;
					})
				};
				reader.readAsDataURL(file);
			}
		</script>

	</body>
</html>